// src/routers/MainRouter.tsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { routes } from './routesConfig';
import Layout from '../components/Layout/index';
import { useStore } from '../stores';
import { ProtectedRoute } from './ProtectedRoute';

const MainRouter: React.FC = () => {
  const store = useStore();
  
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout uilayoutStore={store.ui.layout} />}>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              element={
                'protected' in route && route.protected ? (
                  <ProtectedRoute>
                    {React.createElement(route.element as any)}
                  </ProtectedRoute>
                ) : (
                  React.createElement(route.element as any)
                )
              }
            />
          ))}
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default MainRouter;